<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Open external links</title>
  </head>
  <body>
    <div class="demo">
      <div class="demo-wrapper">
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="open-ex-links">View Demo</button>
          </div>
          <p>
            If you do not want your app to open website links
            <em>within</em> the app, you can use the <code>shell</code> module
            to open them externally. When clicked, the links will open outside
            of your app and in the user's default web browser.
          </p>
          <p>
            When the demo button is clicked, the electron website will open in
            your browser.
          </p>
          <p></p>
          <h5>Renderer Process</h5>
          <pre><code>
                const { shell } = require('electron')
                const exLinksBtn = document.getElementById('open-ex-links')
                exLinksBtn.addEventListener('click', (event) => {
                shell.openExternal('http://electron.atom.io')
                }) 
            </code></pre>

          <div class="demo-protip">
            <h2>ProTip</h2>
            <strong>Open all outbound links externally.</strong>
            <p>
              You may want to open all <code>http</code> and
              <code>https</code> links outside of your app. To do this, query
              the document and loop through each link and add a listener. This
              app uses the code below which is located in
              <code>assets/ex-links.js</code>.
            </p>
            <h5>Renderer Process</h5>
            <pre><code>
                const { shell } = require('electron')
                const links = document.querySelectorAll('a[href]')
                Array.prototype.forEach.call(links, (link) => {
                    const url = link.getAttribute('href')
                    if (url.indexOf('http') === 0) {
                    link.addEventListener('click', (e) => {
                        e.preventDefault()
                        shell.openExternal(url)
                    })
                }})
            </code></pre>
          </div>
        </div>
      </div>
    </div>

    <script>
      // You can also require other files to run in this process
      require("./renderer.js");
    </script>
  </body>
</html>
